<template>
	<view class="container">
		<block v-if="isload">
			<view class="custom-nav" :style="{ top: customNavTop + 'px', height: customNavHeight + 'px' }">
				<view class="search-container" :style="{ marginTop: statusBarHeight + 'px' }">
					<view class="search-box" @tap.stop="goto" :data-url="'/pages/shop/search?bid=' + bid">
						<image class="img" src="/static/img/search-icon2.png"></image>
						<view class="search-text">请输入搜索商品</view>
					</view>
				</view>
			</view>

			<view class="content-container">
				<view class="bg-box">
					<image class="bg-img" src="https://pic.hedashepin.com/upload/7/20250619/f2ca1bbf1ba9c2001869f7ee34b8da46.png" mode=""></image>
				</view>
				<view class="mask" v-if="showPopup" @tap.stop="showPopup = false"></view>
				<view class="nav-tabs-box" style="display: none;">
					<scroll-view scroll-x class="nav-tabs" :scroll-left="scrollLeft">
						
						<view class="tab-item" :class="currentTab == -1 ? 'active' : ''" @tap="switchAllTab">
							<image class="tab-icon" :src="static_url + '/static/img/all_product.jpg'" mode="aspectFill"
								:style="{
						            border: currentTab == -1 ? `2px solid ${t('color2')}` : '2px solid #fff',
						            borderRadius: '50%'
						        }"></image>
							<text class="tab-text" :style="{
						            background: currentTab === -1 ? t('color2') : '',
						            color: currentTab === -1 ? '#fff' : '#333'
						        }">全部</text>
						</view>
						<view v-for="(item, index) in clist" :key="index"
							:class="'tab-item ' + (currentTab === index ? 'active' : '')" @tap="switchTab(item, index)"
							:data-id="item.id">
							<image class="tab-icon" :src="item.pic" mode="aspectFill" :style="{
                  border:
                    currentTab === index ? `2px solid ${t('color2')}` : '2px solid #fff',
                  borderRadius: '50%',
                }">
							</image>

							<text class="tab-text" :style="{
                  background: currentTab === index ? t('color2') : '',
                  color: currentTab === index ? '#fff' : '#333',
                }">
								{{ item.name }}
							</text>
						</view>
					</scroll-view>
					<view class="show-box">
						<view class="show-box-flex" @tap="openshow">
							<view class="show-text">
								<text>展</text>
								<text>开</text>
							</view>
							<image class="show-img" src="/static/img/show-list.png" mode=""></image>
						</view>
					</view>
					<view class="popup-layer" v-if="showPopup">
						<view class="popup-content">
							<view class="popup-item" :class="currentTab == -1 ? 'active' : ''" @tap="switchAllTab">
								<image class="popup-icon" :src="static_url + '/static/img/all_product.jpg'"
									mode="aspectFill" :style="{
							            border: currentTab == -1 ? `2px solid ${t('color2')}` : 'none',
							            borderRadius: '50%'
							        }"></image>
								<text class="popup-text" :style="{
							            background: currentTab === -1 ? t('color2') : '',
							            color: currentTab === -1 ? '#fff' : '#333'
							        }">全部</text>
							</view>
							<view v-for="(item, index) in clist" :key="index" class="popup-item"
								@tap="switchTab(item, index)">
								<image class="popup-icon" :src="item.pic" :style="{
                    border:
                      currentTab === index
                        ? `2px solid ${t('color2')}`
                        : 'none',
                    borderRadius: '50%',
                  }" mode="aspectFill"></image>
								<text class="popup-text" :style="{
                    background: currentTab === index ? t('color2') : '',
                    color: currentTab === index ? '#fff' : '#333',
                  }">{{ item.name }}</text>
							</view>
						</view>
						<view class="popup-bottom" @tap="openshow">
							点击收起<image class="arrow-top" src="/static/img/arrowdown.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="content-container-box">
					<view class="nav_left">
						<view :class="'nav_left_items ' + (curIndex == -1 ? 'active' : '')"
							:style="{ color: curIndex == -1 ? '#171616' : '#333' }" @tap="switchRightTab"
							data-index="-1" :data-id="clist[currentTab] ? clist[currentTab].id : 0">
							<view class="before" v-if="false" :style="{ background: t('color2') }"></view>全部
						</view>
						<block v-if="currentTab == -1">
							<view v-for="(item, index) in clist" :key="index">
								<view :class="'nav_left_items ' + (curIndex == index ? 'active' : '')"
									:style="{ color: curIndex == index ? '#171616' : '#333' }" @tap="switchRightTab"
									:data-index="index" :data-id="item.id">
									<view class="before" v-if="false" :style="{ background: t('color2') }"></view>{{ item.name }}
								</view>
							</view>
						</block>
						<block v-else>
							<view v-for="(item, index) in selectedItem" :key="index">
								<view :class="'nav_left_items ' + (curIndex == index ? 'active' : '')"
									:style="{ color: curIndex == index ? '#171616' : '#333' }" @tap="switchRightTab"
									:data-index="index" :data-id="item.id">
									<view class="before" v-if="false" :style="{ background: t('color2') }"></view>{{ item.name }}
								</view>
							</view>
						</block>

						<view v-show="tabflag" style="height: 200rpx; display: block"></view>
					</view>
					<view class="nav_right">
						<view class="nav_right-content">
							<!-- <view class="nav-img" v-if="categoryimg">
							<image :src="categoryimg"></image>
						</view> -->
							<view class="nav-pai">
								<view class="nav-paili" :style="
                    !field || field == 'sort' ? 'color:' + '#171616' : ''
                  " @tap="changeOrder" data-field="sort" data-order="desc">综合</view>
								<view class="nav-paili" :style="field == 'sales' ? 'color:' + '#171616' : ''"
									@tap="changeOrder" data-field="sales" data-order="desc">销量</view>
								<view class="nav-paili" @tap="changeOrder" data-field="sell_price"
									:data-order="order == 'asc' ? 'desc' : 'asc'">
									
									
										<view :style="field == 'sell_price' ? 'color:' + '#171616' : ''">价格</view>
										<view class="">
											<view class="iconfont iconshangla" :style="
											  field == 'sell_price' && order == 'asc'
											    ? 'color:' + '#171616'
											    : ''
											"></view>
															<view class="iconfont icondaoxu" :style="
											  field == 'sell_price' && order == 'desc'
											    ? 'color:' + '#171616'
											    : ''
											"></view>
										
										
									</view>
								</view>

								<!-- 惊艳度 -->
								<view class="nav-paili" :style="field == 'amazing' ? 'color:' + '#171616' : ''"
									@tap="changeOrder" data-field="amazing" data-order="desc">惊艳度</view>

								<!-- 新品 -->
								<view class="nav-paili" :style="field == 'is_new' ? 'color:' + '#171616' : ''"
									@tap="changeOrder" data-field="is_new" data-order="desc">新品</view>
							</view>
							<view class="classify-ul"
								v-if=" currentTab == -1 && curIndex > -1 && clist[curIndex].child.length > 0">
								<view class="flex" style="width: 100%; overflow-y: hidden; overflow-x: scroll">
									<view class="classify-li" :style="
                      curIndex2 == -1
                        ? 'color:' +
                          t('color2') +
                          ';background:rgba(' +
                          t('color2rgb') +
                          ',0.2)'
                        : ''
                    " @tap="changeCTab" :data-id="clist[curIndex].id" data-index="-1">全部</view>
									<block v-for="(item, idx2) in clist[curIndex].child" :key="idx2">
										<view class="classify-li" :style="
                        curIndex2 == idx2
                          ? 'color:' +
                            t('color2') +
                            ';background:rgba(' +
                            t('color2rgb') +
                            ',0.2)'
                          : ''
                      " @tap="changeCTab" :data-id="item.id" :data-index="idx2">{{ item.name }}
										</view>
									</block>
								</view>
							</view>
							<scroll-view class="classify-box" scroll-y="true" @scrolltolower="scrolltolower">
								<view class="product-itemlist">
									<view class="item" v-for="(item, index) in processedList" :key="item.id"
										:class="item.stock <= 0 ? 'soldout' : ''">
										<block v-if="item.sceneopen == 1">
											<image class="product-pic2" :src="item.scenepic.pics" mode="widthFix" />
										</block>

										<block v-if="item.sceneopen == 0">
											<view class="product-pic" :data-url="'/pages/shop/product?id=' + item.id"
												@click="goto">
												<image class="image" :src="item.pic" mode="widthFix" />
												<view class="overlay">
													<view class="text">售罄</view>
												</view>
											</view>
											<view class="product-info" :data-url="'/pages/shop/product?id=' + item.id"
												@click="goto">
												<view class="p1"><text>{{ item.name }}</text></view>
												<view class="p1-sp"><text>{{ item.sellpoint }}</text></view>
												<view class="p1-degree" v-if="
                            item.amazing != null && item.amazing != undefined
                          ">
													<text v-if="shopset.hide_sales == 0"
														style="margin-right: 10rpx">已售{{ item.sales }}件</text><text>惊艳度{{ item.amazing }}%</text>
												</view>
												<view class="coupon-box" v-if="item.couponlist.length > 0">
													<view class="coupon-item-box"
														:style="{ border: `2rpx solid ${t('color2')}` }"
														v-for="(item, index) in item.couponlist.slice(0, 2)"
														:key="index">
														<view class="coupon-left" v-if="item.type == 1">
															商品券
														</view>
														<view class="coupon-left" v-if="item.type == 41">
															新人券
														</view>

														<view class="coupon-right">
															{{ item.name }}
														</view>
													</view>
												</view>
												<!-- <view class="p3" v-if="shopset.hide_sales == 0">
													<view class="p3-1"><text>已售{{ item.sales }}件</text></view>
												</view> -->

												<view class="p22-flex">
													<view class="p22" style="display: flex" v-if="
                              item.price_show_type == '0' ||
                              !item.price_show_type
                            ">
														<view class="p2"
															v-if="item.price_type != 1 || item.sell_price > 0">
															<text class="t2" v-if="
                                  item.market_price * 1 > item.sell_price * 1
                                ">原价￥{{ item.market_price }}</text>
														</view>
														<view class="p2"
															v-if="item.price_type != 1 || item.sell_price > 0">
															<text class="t1" :style="{ color: t('color2') }">
																<text
																	style="font-size: 20rpx; padding-right: 1px">￥</text>{{ item.sell_price }}
															</text>
														</view>
													</view>
													<view class="p22" v-if="
                              item.price_show_type == '1' ||
                              item.price_show_type == '2'
                            ">
														<view v-if="item.is_vip == '0'">
															<view class="p2" v-if="
                                  item.price_type != 1 || item.sell_price > 0
                                ">
																<text class="t1" :style="{ color: t('color2') }"><text
																		style="padding-right: 1px; font-size: 20rpx">￥</text>
																	<text style="font-size: 32rpx">{{
                                    item.sell_price
                                  }}</text>
																</text>
																<text class="t2" v-if="
                                    item.market_price * 1 > item.sell_price * 1
                                  ">￥{{ item.market_price }}</text>
															</view>

															<view class="flex" v-if="
                                  item.price_show_type == '2' &&
                                  item.lvprice == 1
                                ">
																<view class="member flex"
																	:style="'border-color:' + t('color2')">
																	<view :style="{ background: t('color2') }"
																		class="member_lable flex-y-center">
																		{{ item.level_name_show }}
																	</view>
																	<view :style="'color:' + t('color2')"
																		class="member_value flex-y-center">
																		￥<text>{{ item.sell_price_origin }}</text>
																	</view>
																</view>
															</view>
														</view>
														<view v-if="item.is_vip == '1'">
															<view class="flex" v-if="item.lvprice == 1">
																<view class="member flex"
																	:style="'border-color:' + t('color2')">
																	<view :style="{ background: t('color2') }"
																		class="member_lable flex-y-center">
																		{{ item.level_name_show }}
																	</view>
																	<view :style="'color:' + t('color2')"
																		class="member_value flex-y-center">
																		￥<text style="font-size: 32rpx">{{
                                      item.sell_price
                                    }}</text>
																	</view>
																</view>
															</view>
															<view class="p2" v-if="
                                  item.price_type != 1 || item.sell_price > 0
                                ">
																<text class="t1" :style="{ color: t('color2') }"><text
																		style="font-size: 20rpx; padding-right: 1px">￥</text>
																	<text :style="
                                      item.lvprice == '1'
                                        ? 'font-size:26rpx;'
                                        : 'font-size:32rpx;'
                                    ">{{ item.sell_price_origin }}</text>
																</text>
																<text class="t2" v-if="
                                    item.market_price * 1 > item.sell_price * 1
                                  ">￥{{ item.market_price }}</text>
															</view>
														</view>
													</view>
<view class="">
														<image class="add-cart-img"
															src="https://pic.hedashepin.com/upload/3/20250618/5a5e59b1288a83f10916b53510c908db.png"
															mode=""></image>
													</view>
													<!-- <view class="add-cart" :style="{ background: t('color2') }">
														+
													</view> -->
												</view>
												<view class="bottom-list" v-if="item.ranktxt"
													@click.stop="toSales(item)">
													<image class="bottom-list-icon"
														src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250409/d2dbfe9d52d6e738888700bdadafeb42.png"
														mode=""></image>
													<text class="bottom-list-text">{{item.ranktxt}}</text>
													<image class="bottom-list-icon" src="/static/img/arrowright.png"
														mode=""></image>
												</view>
											</view>
										</block>
									</view>
								</view>
								<nomore text="上拉至下一个分类" v-if="nomore"></nomore>
								<nodata text="暂无相关商品" v-if="nodata"></nodata>
								<view style="width: 100%; height: 140rpx"></view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
			<buydialog v-if="buydialogShow" :proid="proid" @buydialogChange="buydialogChange" :menuindex="menuindex">
			</buydialog>
			<view class="posterDialog linkDialog" v-if="showLinkStatus">
				<view class="main">
					<view class="close" @tap="showLinkChange">
						<image class="img" src="/static/img/close.png" />
					</view>
					<view class="content">
						<view class="title">{{ lx_name }}</view>
						<view class="row" v-if="lx_bid > 0">
							<view class="f1">店铺名称</view>
							<view class="f2" @tap="goto" :data-url="'/pagesExt/business/index?id=' + lx_bid">
								{{ lx_bname }}
								<image src="/static/img/arrowright.png" class="image" />
							</view>
						</view>
						<view class="row" v-if="lx_tel">
							<view class="f1">联系电话</view>
							<view class="f2" @tap="goto" :data-url="'tel::' + lx_tel" :style="{ color: t('color2') }">
								{{ lx_tel }}
								<image :src="static_url + '/static/img/copy.png'" class="copyicon" @tap.stop="copy"
									:data-text="lx_tel">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>

		<loading v-if="loading" loadstyle="left:62.5%"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				pagenum: 1,
				nomore: false,
				nodata: false,
				order: "",
				field: "",
				clist: [],
				curIndex: -1,
				curIndex2: -1,
				datalist: [],
				nodata: false,
				curCid: 0,
				proid: 0,
				buydialogShow: false,
				bid: "",

				showLinkStatus: false,
				lx_name: "",
				lx_bid: "",
				lx_tel: "",

				memberinfo: "",
				noreadstr: "",
				categoryimg: "",
				opttype: 0,
				tabflag: true,
				shopset: {},
				navBarTop: 0,
				statusBarHeight: 0,
				menuButtonInfo: null,
				customNavHeight: 0,
				customNavTop: 0,
				currentTab: 0,
				scrollLeft: 0,
				selectedItem: [],
				pre_url: app.globalData.pre_url,
				static_url: app.globalData.static_url,
				showPopup: false,
				shop_cid: "",
			};
		},

		onLoad: function(opt) {
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取系统信息和胶囊按钮位置信息
			const systemInfo = uni.getSystemInfoSync();
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

			this.statusBarHeight = systemInfo.statusBarHeight;
			this.menuButtonInfo = menuButtonInfo;

			// 计算导航栏高度
			this.customNavHeight = menuButtonInfo.bottom + 8; // 底部加8px间距
			this.customNavTop = 0;
			// #endif

			this.opt = opt;

			if (opt.id) {
				this.opttype = opt.id;
			}
			switch (this.opttype) {
				case "0":
					this.tabflag = true;
					break;
				case "1":
					uni.setNavigationBarTitle({
						title: "品牌专区",
					});
					this.tabflag = false;
					break;
				default:
					this.tabflag = true;
					break;
			}
			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},

		methods: {
			openshow() {
				this.showPopup = !this.showPopup;
			},
			toSales(item) {
				// const cid = this.curCid;
				let cid = item.rankcid;
				let proid = item.id;
				if (cid == null) {
					cid = ''
				}
				uni.navigateTo({
					url: `/pagesSocial/sales/index?cid=${cid}&proid=${proid}&type=1`,
				});
			},

			toTab(tid) {
				let that = this;
				let i = that.clist.findIndex((c) => c.id == tid);
				if (i != -1) {
					that.switchTab(that.clist[i], i);
					that.$forceUpdate();
				}
			},
			// 添加切换全部的方法
			switchAllTab() {
				this.currentTab = -1; // 使用-1表示全部选项
				this.curIndex = -1;
				this.curIndex2 = -1;
				this.nodata = false;
				this.pagenum = 1;
				this.datalist = [];
				this.nomore = false;

				// 设置cid为0表示获取全部分类数据
				this.curCid = 0;
				this.selectedItem = []; // 清空子分类列表

				this.getdatalist();
				this.showPopup = false;
			},
			switchTab(item, index) {
				this.currentTab = index;
				this.selectedItem = item.child;
				var id = item.id;
				this.curIndex = -1;
				this.curIndex2 = -1;
				this.nodata = false;
				this.curCid = id;
				this.pagenum = 1;
				this.datalist = [];
				this.nomore = false;
				// 计算滚动位置
				this.calculateScrollLeft(index);
				this.getdatalist();
				this.showPopup = false;
			},
			// 添加计算滚动位置的方法
			calculateScrollLeft(index) {
				const query = uni.createSelectorQuery();
				query.select(".nav-tabs").boundingClientRect();
				query.select(".tab-item").boundingClientRect();

				query.exec((res) => {
					if (res[0] && res[1]) {
						const tabsWidth = res[0].width; // 导航栏总宽度
						const itemWidth = res[1].width; // 单个tab的宽度
						const itemCount = this.clist.length; // tab总数

						// 计算目标滚动位置
						let targetScrollLeft =
							index * itemWidth - (tabsWidth - itemWidth) / 2;

						// 确保不会滚动到负值
						targetScrollLeft = Math.max(0, targetScrollLeft);

						// 确保不会滚动超出最大范围
						const maxScroll = itemWidth * itemCount - tabsWidth;
						targetScrollLeft = Math.min(targetScrollLeft, maxScroll);

						// 设置滚动位置
						this.scrollLeft = targetScrollLeft;
					}
				});
			},
			getdata: function() {
				var that = this;
				var nowcid = that.opt.cid;
				if (!nowcid) nowcid = "";
				that.pagenum = 1;
				that.datalist = [];
				that.loading = true;
				let url = "";

				switch (that.opttype) {
					case "0":
						url = "Shop/classify";
						break;
					case "1":
						url = "Shop/brand";
						break;
					default:
						url = "Shop/classify";
						break;
				}
				app.get(
					url, {
						needinit: 1,
						cid: nowcid,
						bid: that.bid,
					},
					function(res) {
						that.loading = false;
						var clist = res.data;
						that.clist = clist;

						// 初始化选中全部分类
						that.currentTab = -1;
						that.selectedItem = [];

						// 如果没有指定cid，则使用第一个分类的id
						if (!nowcid && clist && clist.length > 0) {
							that.curCid = clist[0].id;
						}

						// 如果有指定cid，查找对应的分类
						if (nowcid) {
							for (var i = 0; i < clist.length; i++) {
								if (clist[i]["id"] == nowcid) {
									that.curIndex = i;
									that.curCid = nowcid;
									that.selectedItem = clist[i].child || [];
									that.currentTab = i;
								}
								var downcdata = clist[i]["child"];
								var isget = 0;
								for (var j = 0; j < downcdata.length; j++) {
									if (downcdata[j]["id"] == nowcid) {
										that.curIndex = i;
										that.curIndex2 = j;
										that.curCid = nowcid;
										that.selectedItem = clist[i].child || [];
										that.currentTab = i;
										isget = 1;
										break;
									}
								}
								if (isget) break;
							}
						}
						that.categoryimg = res._initdata.categoryimg;
						that.loaded();
						that.getdatalist();
						if (that.opt.tid) {
							that.toTab(that.opt.tid);
						}
					}
				);
			}, 

			getdatalist: function(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}
				var that = this;
				var pagenum = that.pagenum;
				var cid = that.curCid;
				var bid = that.opt.bid ? that.opt.bid : '';
				var order = that.order;
				var field = that.field;
				that.loading = true;
				that.nodata = false;
				that.nomore = false;
				var wherefield = {};
				wherefield.pagenum = pagenum;
				wherefield.field = field;
				wherefield.order = order;
				wherefield.bid = bid;

				// 如果是全部分类（currentTab === -1），则使用cid=0
				if (that.currentTab === -1) {
					// "全部"按钮
					if (that.curCid == 0) {
						wherefield.cid = 0;
					} else {
						// 左侧一级分类
						wherefield.cid = that.curCid;
					}
				} else if (bid > 0) {
					wherefield.cid2 = cid;
				} else {
					switch (that.opttype) {
						case "0":
							wherefield.cid = cid;
							break;
						case "1":
							wherefield.brandid = cid;
							break;
						default:
							wherefield.cid = cid;
							break;
					}
				}
				//如果设置过地域限制【定位模式下】
				var cachearea = app.getCache('user_current_area');
				var cachelongitude = app.getCache('user_current_longitude');
				var cachelatitude = app.getCache('user_current_latitude');
				if (cachearea) {
					wherefield.area = cachearea;
				}
				if (cachelongitude) {
					wherefield.latitude = cachelatitude;
					wherefield.longitude = cachelongitude;
				}

				app.post('Shop/getprolist', wherefield, function(res) {
					that.loading = false;
					uni.stopPullDownRefresh();

					var data = res.data;
					that.shopset = res.shopset;

					// 检查当前分类是否有数据
					if (data.length == 0) {
						// 如果是第一页，显示无数据提示
						if (pagenum == 1) {
							that.nodata = true;
						} else {
							// 显示上拉至下一个分类的提示
							that.nomore = true;
						}
					}

					var datalist = that.datalist;
					var newdata = datalist.concat(data);
					that.datalist = newdata;
					that.memberinfo = res.memberinfo;
				});
			},

			scrolltolower: function() {
				if (!this.nomore) {
					this.pagenum = this.pagenum + 1;
					this.getdatalist(true);
				} else {
					// 当显示"上拉至下一个分类"时，用户再次上拉则切换到下一个分类
					if (this.currentTab === -1) {
						// 在全部分类模式下
						if (this.curIndex === -1) {
							// 如果当前是"全部"，切换到第一个分类
							if (this.clist && this.clist.length > 0) {
								setTimeout(() => {
									this.switchRightTab({
										currentTarget: {
											dataset: {
												index: 0,
												id: this.clist[0].id
											}
										}
									});
								}, 1000);
							}
						} else {
							// 如果当前是某个分类，切换到下一个分类
							let nextIndex = this.curIndex + 1;
							if (nextIndex < this.clist.length) {
								setTimeout(() => {
									this.switchRightTab({
										currentTarget: {
											dataset: {
												index: nextIndex,
												id: this.clist[nextIndex].id
											}
										}
									});
								}, 1000);
							}
						}
					} else {
						// 原有逻辑：在具体分类模式下
						let currentCategoryIndex = this.currentTab;
						if (currentCategoryIndex !== -1 && currentCategoryIndex < this.clist.length - 1) {
							let nextCategory = this.clist[currentCategoryIndex + 1];
							setTimeout(() => {
								this.switchTab(nextCategory, currentCategoryIndex + 1);
							}, 1000);
						}
					}
				}
			},

			//改变子分类
			changeCTab: function(e) {
				var that = this;

				var id = e.currentTarget.dataset.id;
				var index = parseInt(e.currentTarget.dataset.index);

				this.curIndex2 = index;
				this.nodata = false;

				this.curCid = id;

				this.pagenum = 1;

				this.datalist = [];

				this.nomore = false;

				this.getdatalist();
			},

			//改变排序规则
			changeOrder: function(e) {
				var t = e.currentTarget.dataset;

				this.field = t.field;
				this.order = t.order;

				this.pagenum = 1;
				this.datalist = [];
				this.nomore = false;

				this.getdatalist();
			},

			//事件处理函数
			switchRightTab: function(e) {
				var that = this;
				var index = parseInt(e.currentTarget.dataset.index);
				var id = e.currentTarget.dataset.id;

				this.curIndex = index;
				this.curIndex2 = -1;
				this.nodata = false;

				// 如果在"全部分类"下
				if (this.currentTab === -1) {
					if (index === -1) {
						// 点击左侧"全部"，cid=0
						this.curCid = 0;
					} else {
						// 点击左侧某个一级分类，cid=该分类id
						this.curCid = id;
					}
				} else {
					// 原有逻辑
					if (index === -1 && this.clist[this.currentTab]) {
						this.curCid = this.clist[this.currentTab].id;
					} else {
						this.curCid = id;
					}
				}

				this.pagenum = 1;
				this.datalist = [];
				this.nomore = false;

				this.getdatalist();
			},
			buydialogChange: function(e) {
				if (!this.buydialogShow) {
					this.proid = e.currentTarget.dataset.proid;
				}
				this.buydialogShow = !this.buydialogShow;
			},
			showLinkChange: function(e) {
				var that = this;
				that.showLinkStatus = !that.showLinkStatus;
				that.lx_name = e.currentTarget.dataset.lx_name;
				that.lx_bid = e.currentTarget.dataset.lx_bid;
				that.lx_bname = e.currentTarget.dataset.lx_bname;
				that.lx_tel = e.currentTarget.dataset.lx_tel;
			},
		},
		computed: {
			// 处理后的列表
			processedList() {
				const result = [];
				this.datalist.forEach((item) => {
					result.push(item); // 插入当前项
					if (item.sceneopen == 1) {
						result.push({
							...item,
							sceneopen: 0,
						}); // 插入新项
					}
				});
				return result;
			},
		},
	};
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #fff;
	}

	.container {
		width: 100%;
		height: 100vh;
		max-width: 640px;
		color: #939393;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.bg-box{
		width: 100%;
		height: 110rpx;
	}
	.bg-img{
		width: 100%;
		height: 100%;
	}
	.custom-nav {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #ffffff;
		z-index: 999;
	}

	.search-container {
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		width: 75%;
		box-sizing: border-box;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		height: 62rpx;
		/* 调整搜索框高度 */
		border-radius: 28rpx;
		background-color: #f5f5f5;
		margin: 0 10rpx;
	}

	.search-box .img {
		width: 36rpx;
		height: 36rpx;
		margin: 0 10rpx 0 20rpx;
	}

	.search-box .search-text {
		font-size: 24rpx;
		color: #939393;
	}

	.content-container {
		margin-top: 180rpx;
		height: calc(100vh - 280rpx);
	}

	.content-container-box {
		flex: 1;
		height: calc(100% - 100rpx);
		display: flex;
		overflow: hidden;
	}

	/* #ifdef H5 */
	.content-container {
		margin-top: 80rpx;
	}

	/* #endif */
	.nav_left {
		width: 25%;
		/* height: calc(100% - 100rpx); */
		height: 100%;
		background: #E5E2DA;
		overflow-y: auto;
		position: relative;
		font-weight: 700;
	}

	.nav_left .nav_left_items {
		line-height: 50rpx;
		color: #333;
		// font-weight: bold;
		// border-bottom: 0px solid #e6e6e6;
		font-size: 24rpx;
		position: relative;
		// border-right: 0 solid #e6e6e6;
		padding: 25rpx 20rpx;
		text-align: center;
	}

	.nav_left .nav_left_items.active {
		background: #fff;
		color: #333;
		font-size: 24rpx;
		font-weight: bold;
	}

	.nav_left .nav_left_items .before {
		display: none;
		position: absolute;
		top: 50%;

		margin-top: -12rpx;
		left: 0;
		height: 24rpx;
		border-radius: 4rpx;
		width: 8rpx;
	}

	.nav_left .nav_left_items.active .before {
		display: block;
	}

	.nav_right {
		width: 75%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
		box-sizing: border-box;
		padding: 0rpx 20rpx 0 20rpx;
	}

	.nav_right-content {
		height: 100%;
	}

	.nav-pai {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 18rpx;
		background-color: #fff;
		margin-bottom: 14rpx;
		margin-top: 14rpx;
		position: sticky;
		top: 0;
		z-index: 1;
		gap: 10rpx;
		/* 设置元素之间的间隔 */
	}

	.nav-paili {
		text-align: center;
		color: #323232;
		font-size: 24rpx;
		position: relative;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #f5f5f5;
		border-radius: 36rpx;
		flex: 1;
		/* 平均分配宽度 */
	}

	//  .iconshangla {
	// 	position: absolute;
	// 	top: -4rpx;
		
	// 	padding: 0 6rpx;
	// 	font-size: 20rpx;
	// 	color: #7d7d7d;
	// }

	//  .icondaoxu {
	// 	position: absolute;
	// 	top: 8rpx;
		
	// 	padding: 0 6rpx;
	// 	font-size: 20rpx;
	// 	color: #7d7d7d;
	// }
	.nav-paili {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 100%;
	}
	
	.nav-paili-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	
	.nav-paili .iconfont {
	  font-size: 10px;
	  line-height: 1;
	}

	.classify-ul {
		width: 100%;
		height: 80rpx;
		padding: 0 10rpx;
	}

	.classify-li {
		flex-shrink: 0;
		display: flex;
		background: #f5f6f8;
		border-radius: 22rpx;
		color: #6c737f;
		font-size: 20rpx;
		text-align: center;
		height: 44rpx;
		line-height: 44rpx;
		padding: 0 28rpx;
		margin: 12rpx 10rpx 12rpx 0;
	}

	.classify-box {
		flex: 1;
		overflow-y: auto;
		height: calc(100% - 94rpx);
		padding: 0 0 20rpx 0;
	}

	.classify-box .nav_right_items {
		width: 100%;
		border-bottom: 1px #f4f4f4 solid;
		padding: 16rpx 0;
		box-sizing: border-box;
		position: relative;
	}

	.product-itemlist {
		height: auto;
		position: relative;
		overflow: hidden;
		padding: 0px;
		display: flex;
		flex-wrap: wrap;
	}

	.product-itemlist .item {
		width: 100%;
		/* height: 200rpx; */
		display: inline-block;
		position: relative;
		margin-bottom: 12rpx;
		background: #fff;
		display: flex;
		/* padding: 14rpx 0; */
		overflow: hidden;
		border-radius: 18rpx;
		border-bottom: 1px solid #f8f8f8;
	}

	.product-itemlist .product-pic {
		width: 35%;
		height: 0;
		overflow: hidden;
		background: #ffffff;
		padding-bottom: 35%;
		position: relative;
		border-radius: 4px;
		margin-left: 14rpx;
		margin-top: 14rpx;
	}

	.product-itemlist .product-pic .image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	.product-itemlist .product-pic .saleimg {
		position: absolute;
		width: 120rpx;
		height: auto;
		top: -6rpx;
		left: -6rpx;
	}

	.product-itemlist .product-info {
		width: 70%;
		padding: 14rpx 10rpx 5rpx 20rpx;
		position: relative;
	}

	.product-itemlist .product-info .p1 {
		color: #323232;
		font-weight: bold;
		font-size: 28rpx;
		line-height: 36rpx;
		margin-bottom: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		height: 72rpx;
	}

	.product-itemlist .product-info .p1-sp {
		color: #d46b08;
		font-weight: bold;
		font-size: 18rpx;
		line-height: 36rpx;
		margin-bottom: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		width: 100%;
	}

	.p1-degree {
		font-size: 24rpx;
	}

	.product-itemlist .product-info .p22 {}

	.product-itemlist .product-info .p2 {
		/* margin-top: 10rpx; */
		height: 36rpx;
		line-height: 36rpx;
		overflow: hidden;
	}

	.product-itemlist .product-info .p2 .t1 {
		font-size: 32rpx;
	}

	.product-itemlist .product-info .p2 .t2 {
		font-size: 24rpx;
		color: #aaa;
	}

	.product-itemlist .product-info .p3 {
		display: flex;
		align-items: center;
		overflow: hidden;
		margin-top: 5rpx;
		/* float: right; */
		position: absolute;
		// right: 15rpx;
		// bottom: 15rpx;
	}

	.product-itemlist .product-info .p3-1 {
		font-size: 18rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: right;
		color: #999;
	}

	.product-itemlist .product-info .p4 {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		position: absolute;
		display: relative;
		bottom: 6rpx;
		right: 4rpx;
		text-align: center;
	}

	.product-itemlist .product-info .p4 .icon_gouwuche {
		font-size: 32rpx;
		height: 56rpx;
		line-height: 56rpx;
	}

	.overlay {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		width: 60%;
		height: 60%;
		border-radius: 50%;
		display: none;
		top: 20%;
		left: 20%;
	}

	.overlay .text {
		color: #fff;
		text-align: center;
		transform: translateY(100%);
	}

	.product-itemlist .soldout .product-pic .overlay {
		display: block;
	}

	.product-pic2 img {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		border-radius: 10%;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.lianxi {
		color: #fff;
		border-radius: 50rpx 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 22rpx;
		padding: 0 14rpx;
		display: inline-block;
		float: right;
	}

	.member {
		position: relative;
		border-radius: 8rpx;
		border: 1rpx solid #fd4a46;
		overflow: hidden;
		margin-top: 10rpx;
		box-sizing: content-box;
	}

	.member_lable {
		height: 100%;
		font-size: 22rpx;
		color: #fff;
		background: #fd4a46;
		padding: 0 10rpx;
	}

	.member_value {
		padding: 0 10rpx;
		font-size: 20rpx;
		color: #fd4a46;
	}

	.nav-img {
		width: 100%;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.nav-img image {
		width: 100%;
		height: 200rpx;
	}

	.nav-tabs-box {
		position: relative;
	}

	.nav-tabs {
		white-space: nowrap;
		background: #fff;
		padding: 0 20rpx 20rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.tab-item {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			width: 120rpx;
			padding: 10rpx 0;
			overflow: hidden;

			.tab-icon {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 8rpx;
				border-radius: 50%;
			}

			.tab-text {
				font-size: 22rpx;
				border-radius: 36rpx;
				padding: 6rpx 10rpx;
				overflow: hidden;
				width: 110rpx;
				text-align: center;
			}
		}
	}
	.add-cart-img {
		width: 40rpx;
		height: 40rpx;
	}
	.add-cart {
		display: flex;
		align-items: center;

		justify-content: center;

		width: 50rpx;

		height: 50rpx;

		border-radius: 50%;

		font-size: 36rpx;

		color: #fff;
	}

	.show-box {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		z-index: 99;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40rpx;
		height: 100%;
	}

	.show-box-flex {
		color: #333;
		font-size: 24rpx;
	}

	.show-text {
		display: flex;
		flex-direction: column;
		line-height: 1;
	}

	.show-img {
		width: 26rpx;
		height: 26rpx;
		margin-top: 6rpx;
	}

	.topref {
		background-color: #fff;
	}

	.popup-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		z-index: 100;
		padding: 20rpx;
	}

	.popup-content {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.popup-item {
		width: calc((100% - 64rpx) / 5);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 8rpx;
	}

	.popup-icon {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}

	.popup-text {
		font-size: 22rpx;
		color: #333;
		margin-top: 8rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
		border-radius: 36rpx;
		padding: 4rpx 10rpx;
	}

	.popup-bottom {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 98;
	}

	.arrow-top {
		width: 30rpx;
		height: 30rpx;
		transform: rotate(180deg);
	}

	.coupon-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.coupon-item-box {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-top: 6rpx;
	}

	.coupon-left {
		padding-right: 6rpx;
		position: relative;
		flex-shrink: 0;
	}

	.coupon-left::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1rpx;
		height: 80%;
		border-right: 2rpx dashed #ccc;
	}

	.coupon-right {
		padding-left: 6rpx;
		flex-shrink: 0;
	}

	.p22-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 6rpx;
		margin-bottom: 6rpx;
	}

	.bottom-list {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		background-color: #fff7e6;
		padding: 4rpx 10rpx;
		width: fit-content;
		color: #666;
	}

	.bottom-list-text {
		margin: 0 6rpx;
	}

	.bottom-list-icon {
		width: 30rpx;
		height: 30rpx;
	}
</style>